﻿<template>
  <el-dialog v-drag :title = 'dialogTitle' :visible.sync='dialogFormVisible' width='40%' @close = 'closeDialog'
  append-to-body :close-on-click-modal = "false" :close-on-press-escape = "false">
    <el-form :model = "ruleForm" ref = "ruleForm" :label-width = 'labelWidth'>
      <el-form-item label = "表格行事件隐藏表达式：" v-if = "rowEventHiddenExpressRow && rowEventHiddenExpressRow.eventsType !== 'selfDefinePage_openPage'">
        <el-input v-model = 'ruleForm.rowExpress' placeholder = "表格行事件隐藏表达式" type = 'textarea' autosize></el-input>
      </el-form-item>
      <el-form-item label = "系统外链接地址: " v-if = "rowEventHiddenExpressRow && (rowEventHiddenExpressRow.eventsType === 'selfDefinePageTable_openPage' || rowEventHiddenExpressRow.eventsType === 'selfDefinePage_openPage')">
        <el-input v-model = 'ruleForm.linkUrlExpress' placeholder = "系统外链接地址" type = 'textarea' autosize></el-input>
      </el-form-item>
      <el-form-item class = 'form_noLeftMargin'>
        <el-button type = "info" @click = "resetForm ('ruleForm')">取 消</el-button>
        <el-button type = "primary" @click = "submitForm ('ruleForm')">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  props: ['rowEventHiddenExpressRow', 'rowEventHiddenExpressDialog'],
  data () {
    return {
      dialogTitle: '设置表格行事件隐藏表达式或系统外链接地址',
      dialogFormVisible: false,
      labelWidth: '180px',
      ruleForm: {
        rowExpress: '',
        linkUrlExpress: ''
      }
    }
  },
  methods: {
    // 点击弹窗的确定按钮
    submitForm (forms) {
      this.$refs[forms].validate((valid) => {
        if (valid) {
          let obj = {
            rowExpress: this.ruleForm.rowExpress,
            linkUrlExpress: this.ruleForm.linkUrlExpress
          }
          this.$emit('settingRowEventHiddenExpressSuccess', obj)
        } else {
          return false
        }
      })
    },
    // 点击弹窗的取消按钮
    resetForm (forms) {
      this.$refs[forms].clearValidate()
      this.$emit('settingRowEventHiddenExpressFailed')
    },
    closeDialog () {
      this.$refs.ruleForm.clearValidate()
      this.$emit('settingRowEventHiddenExpressFailed')
    }
  },
  watch: {
    rowEventHiddenExpressDialog: {
      handler (val) {
        this.dialogFormVisible = val
        if (val) {
          this.ruleForm.rowExpress = this.rowEventHiddenExpressRow.row_express ? this.rowEventHiddenExpressRow.row_express : ''
          this.ruleForm.linkUrlExpress = this.rowEventHiddenExpressRow.linkUrlExpress ? this.rowEventHiddenExpressRow.linkUrlExpress : ''
        }
      },
      deep: true
    }
  }
}
</script>
